<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形</title>
</head>
<style>
    body{
        --color1:red;
    }
    #triangle {
        border: 20px solid;
        border-color: transparent transparent transparent red;
        display: inline-block;
    }

    #arc {
        border: 20px solid red;
        border-radius: 100%;
        display: inline-block;
    }

    #sqre {
        border: 20px solid red;
        display: inline-block;

        color:var(--color1)
    }

    #pentagon {
        position: relative;
        width: 54px;
        border-width: 50px 18px 0;
        border-style: solid;
        border-color: red transparent;
    }

    #pentagon:before {
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        top: -85px;
        left: -18px;
        border-width: 0 45px 35px;
        border-style: solid;
        border-color: transparent transparent blue;
    }
</style>

<body>
    <canvas id="canvas"></canvas>
    <input type="range" value = "40" id="backBlur" min="0" max="40" style="transform: rotate(90deg); " title="拖动调整背景模糊"/>
    <div id="triangle" >

    </div>
    <div id="arc">

    </div>

    <div id="sqre">

    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="pentagon">
aaaaaaaaaaaaaaaaa
    </div>
    <script>
        /** @type {HTMLCanvasElement} */
        let canvas = document.getElementById("canvas")
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        canvas.style.position = "fixed"
        canvas.style.top = 0;
        canvas.style.left = 0
        canvas.style.zIndex = -1
        canvas.style.filter = "blur(0px)"
        let ctx = canvas.getContext("2d")
        ctx.globalAlpha = 0.5

        let arcArr = [];

        var getRandomColor = function () {
            return '#' + (function (color) {
                return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)])
                    && (color.length == 6) ? color : arguments.callee(color);
            })('');
        }

        const gaussBlur = function (imgData, radius) {

            radius *= 3; //不知为什么,我的模糊半径是 css中 filter:bulr 值的三倍时效果才一致。莫非是当时的测试机是@3x？

            //Copy图片内容
            const pixes = new Uint8ClampedArray(imgData.data);
            const width = imgData.width;
            const height = imgData.height;

            let gaussSum = 0,
                x, y,
                r, g, b, a, i;

            //模糊半径取整
            radius = Math.floor(radius);
            //sigma越小中心点权重越高, sigma越大越接近平均模糊
            const sigma = radius / 3;
            //两个分布无相关性, 为了各方向上权重分布一致
            const Ror = 0;

            const L = radius * 2 + 1;  //矩阵宽度

            const Ror2 = Ror * Ror;
            const s2 = sigma * sigma;
            const c1 = 1 / (2 * Math.PI * s2 * Math.sqrt(1 - Ror * Ror));
            const c2 = -1 / (2 * (1 - Ror2));

            //定义高斯矩阵 , 存储在一维数组中
            const gaussMatrix = [];

            //根据 xy 计算 index
            gaussMatrix.getIndex = (x, y) => {
                return (x + radius) + (y + radius) * L;
            }
            //根据 xy 获取权重
            gaussMatrix.getWeight = (x, y) => {
                return gaussMatrix[gaussMatrix.getIndex(x, y)];
            }
            //根据 index 获取 x 偏移
            gaussMatrix.getX = (index) => {
                return index % L - radius;
            }
            //根据 index 获取 y 偏移
            gaussMatrix.getY = (index) => {
                return Math.floor(index / L) - radius;
            }

            //覆写forEach , 方便遍历
            gaussMatrix.forEach = (f) => {
                gaussMatrix.map((w, i) => {
                    f(w, gaussMatrix.getX(i), gaussMatrix.getY(i))
                })
            }

            //生成高斯矩阵
            for (y = -radius; y <= radius; y++) {
                for (x = -radius; x <= radius; x++) {
                    let i = gaussMatrix.getIndex(x, y);
                    g = c1 * Math.exp(c2 * (x * x + 2 * Ror * x * y + y * y) / s2);
                    gaussMatrix[i] = g;
                }
            }

            //快捷获取像素点数据
            const getPixel = (x, y) => {
                if (x < 0 || x >= width || y < 0 || y >= height) {
                    return null;
                }
                let p = (x + y * width) * 4;
                return pixes.subarray(p, p + 4);
            }

            //遍历图像上的每个点
            i = 0;
            for (y = 0; y < height; y++) {
                for (x = 0; x < width; x++) {

                    //重置 r g b a Sum
                    r = g = b = a = 0;
                    gaussSum = 0;

                    //遍历模糊半径内的其他点
                    gaussMatrix.forEach((w, dx, dy) => {
                        let p = getPixel(x + dx, y + dy);
                        if (!p) return;

                        //求加权和
                        r += p[0] * w;
                        g += p[1] * w;
                        b += p[2] * w;
                        a += p[3] * w;
                        gaussSum += w;
                    });

                    //写回imgData
                    imgData.data.set([r, g, b, a].map(v => v / gaussSum), i);

                    //遍历下一个点
                    i += 4;
                }
            }

            return imgData;
        };
        let initArc = function () {
            for (let i = 0; i < 50; i++) {
                let x = Math.random() * canvas.width
                let y = Math.random() * canvas.height
                let c = getRandomColor()
                let r = Math.random() * 50
                arcArr.push({ x: x, y: y, r: r, c: c, xs: Math.random() * 5, ys: Math.random() * 5 });
            }
        }();

        let backBlur = document.getElementById("backBlur");
        backBlur.addEventListener("change",function(){
            canvas.style.filter = `blur(${this.value}px)`
        })

        function changeBg() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let i = 0; i < arcArr.length; i++) {
                ctx.beginPath()
                ctx.fillStyle = arcArr[i].c
                ctx.arc(arcArr[i].x, arcArr[i].y, arcArr[i].r, 0, Math.PI * 2)
                ctx.closePath()
                ctx.fill()
                arcArr[i].x += arcArr[i].xs
                arcArr[i].y += arcArr[i].ys
                if (arcArr[i].x >= canvas.width || arcArr[i].x < 0) {
                    arcArr[i].xs *= -1;
                }
                if (arcArr[i].y >= canvas.height || arcArr[i].y < 0) {
                    arcArr[i].ys *= -1;
                }
            }

            requestAnimationFrame(changeBg)
        }
        changeBg();

    </script>
</body>

</html>